import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import GlobalNav from '@/components/base/GlobalNav';
import Footer from '@/components/base/Footer';
import HeaderTop from '@/components/users/users-base/HeaderTop';
import HeaderNav from '@/components/users/users-base/HeaderNav';
import Cook from './child/Cook';
import Cookbook from './child/CookBook';
import Menu from './child/Menu';
import Cooked from './child/Cooked';
import Message from './child/Message';
// import Draft from './child/Draft';
// import Collection from './child/Collection';
class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      u_name:'',
      list:[
        {
          path: '/users/cook',
          name: '概况'
        },
        {
          path: '/users/cookbook',
          name: '菜谱'
        },
        {
          path: '/users/cookde',
          name: '作品 48'
        },{
          path: '/users/menu',
          name: '菜单'
        },
        {
          path: '/users/message',
          name: '留言板'
        }
        
        // {
        //   path: '/users/collection',
        //   name: '收藏'
        // },
        // {
        //   path: '/users/draft',
        //   name: '草稿箱'
        // }
      ]
    }
  }

  componentDidMount () {
    let uname = JSON.parse(localStorage.getItem('u_name'))
    this.setState({
      u_name:uname
    })
  }
  render () {
    console.log(this.props)
    return (
      <div className = "container">
        <div className="header">
          <GlobalNav { ...this.props}/>
         </div>
        <div className="section">
          <HeaderTop {...this.props} u_name={ this.state.u_name }/>
          <HeaderNav 
          list = { this.state.list }
          />
          <Switch>
            <Route path = "/users/cook" component = { Cook } />
            <Route path = "/users/cookbook" component = { Cookbook } />
            <Route path = "/users/cookde" component = { Cooked } />
            <Route path = "/users/menu" component = { Menu } />
            <Route path = "/users/message" component = { Message } />
            {/* <Route path = "/users/draft" component = { Draft } /> */}
            {/* <Route path = "/users/collection" component = { Collection } /> */}
            <Redirect from = "/users" to = "/users/cook"/>
          </Switch>
        </div>
        <div className="foot">
          <Footer />
        </div>
      </div>
    )
  }
}

export default Com;
